<script setup>
import { ref, reactive, onMounted } from "vue"
import CargoAdd from "./CargoAdd/index.vue"
import CargoEdit from "./CargoEdit/index.vue"
import CargoPreview from "./CargoPreview/index.vue"
const clWrap = ref()
const height = ref(0)
const params = reactive({
  cargoName: '',
  state: "",
  business: ""
})
const stateOptions = ref([
  {
    value: '0',
    label: "待上架"
  },
  {
    value: "1",
    label: "已上架"
  },
  {
    value: "2",
    label: "已下架"
  }
])
const businessOptions = ref([
  {
    id: 1,
    businessName: '果塘湖农贸市场',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "18983838484",
    taken: "2000",
    state: "0"
  },
  {
    id: 2,
    businessName: '渝佰滋味',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "18983838484",
    taken: "2000",
    state: "1"
  },
  {
    id: 3,
    businessName: '鲜丰水果',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "18983838484",
    taken: "2000",
    state: "0"
  },
])
const tableData = ref([{
  id: 1,
  cargoName: 'A级-进口香蕉1份', //货品名
  wight: "500", // 重量
  weightArea: '400g-500g', // 重量范围
  price: '85', // 初始价格
  discount: 0.2, //折扣
  sale: 37, //月售
  seller: '果塘湖农贸市场', //商家
  sellerAddress: "重庆市渝北区果塘路9号", //商家地址
  specifications: "标准", // 规格
  variety: "香蕉", // 品种
  descript: "描述详情", //描述
  imgs: [
    'temp1.jpg', 'temp5.jpg', 'u454.png'
  ],
  originPrice: "90",
  inventoryQuantity: "100",
  saled: "20",
  quantity: "100",
  saledMoney: "170",
  state: "0",
  sort: '1'
}, {
  id: 2,
  cargoName: '榨菜碎粒80g', //货品名
  wight: "80", // 重量
  weightArea: '0-100g', // 重量范围
  price: '13.50', // 初始价格
  discount: 0.2, //折扣
  sale: 37, //月售
  seller: '渝佰滋味', //商家
  sellerAddress: "重庆市江北区石马河街道玉带山200号", //商家地址
  specifications: "标准", // 规格
  variety: "榨菜", // 品种
  descript: "乌江榨菜 下饭菜 清香口感", //描述
  imgs: [
    'zhacai1.png', 'zhacai2.png'
  ],
  originPrice: "90",
  inventoryQuantity: "100",
  saled: "20",
  quantity: "100",
  saledMoney: "170",
  state: "0",
  sort: '2'
}, {
  id: 3,
  cargoName: '京地达蒲江红心猕猴桃 20枚大果单果90-110g', //货品名
  wight: "100", // 重量
  weightArea: '100g-200g', // 重量范围
  price: '35.80 ', // 初始价格
  discount: 0.2, //折扣
  sale: 37, //月售
  seller: '鲜丰水果', //商家
  sellerAddress: "重庆市沙坪坝区虎溪街道大学城西路29号附16号", //商家地址
  specifications: "标准", // 规格
  variety: "红心果", // 品种
  descript: "奇异果水果源头直发包邮", //描述
  imgs: [
    'mihoutao1.png', 'mihoutao2.png'
  ],
  originPrice: "90",
  inventoryQuantity: "100",
  saled: "20",
  quantity: "100",
  saledMoney: "170",
  state: "2",
  sort: '3'
}, {
  id: 4,
  cargoName: '云南高山青皮蜜桔橘子2斤', //货品名
  wight: "1000", // 重量
  weightArea: '900g-1kg', // 重量范围
  price: '15.90', // 初始价格
  discount: 0.2, //折扣
  sale: 37, //月售
  seller: '鲜丰水果', //商家
  sellerAddress: "重庆市沙坪坝区虎溪街道大学城西路29号附16号", //商家地址
  specifications: "标准", // 规格
  variety: "蜜桔", // 品种
  descript: "云南高山青皮蜜桔橘子 新鲜水果皮薄蜜橘桔子整箱新鲜孕妇水果 ", //描述
  imgs: [
    'miju1.png', 'miju2.png'
  ],
  originPrice: "90",
  inventoryQuantity: "100",
  saled: "20",
  quantity: "100",
  saledMoney: "170",
  state: "1",
  sort: '4'
}, {
  id: 5,
  cargoName: '新鲜冰糖纯甜小西瓜薄皮网红手掰现摘水果 2个精选装', //货品名
  wight: "2000", // 重量
  weightArea: '1kg-2kg', // 重量范围
  price: '88', // 初始价格
  discount: 0.2, //折扣
  sale: 37, //月售
  seller: '鲜丰水果', //商家
  sellerAddress: "重庆市沙坪坝区虎溪街道大学城西路29号附16号", //商家地址
  specifications: "标准", // 规格
  variety: "庞各庄西瓜", // 品种
  descript: "青尊园庞各庄西瓜 新鲜冰糖纯甜小西瓜薄皮网红手掰现摘水果", //描述
  imgs: [
    'xigua1.png', 'xigua2.png'
  ],
  originPrice: "90",
  inventoryQuantity: "100",
  saled: "20",
  quantity: "100",
  saledMoney: "170",
  state: "0",
  sort: '5'
}])
const cargoAddVisiable = ref(false)
const cargoEditVisiable = ref(false)
const cargoPreviewVisiable = ref(false)
const chooseCargo = reactive({
  value: {}
})
onMounted(() => {
  height.value = clWrap.value.offsetHeight - 35 - 52 - 20 - 10
})

const gotoAdd = () => {
  cargoAddVisiable.value = true
}

const gotoEdit = (row) => {
  chooseCargo.value = row
  cargoEditVisiable.value = true
}

const gotoPreview = () => {
  cargoPreviewVisiable.value = true
}
</script>

<template>
  <div class="cl-wrap" ref="clWrap">
    <div class="static">
      <el-descriptions column="6" border label-class-name="my-label">
        <el-descriptions-item align="center" label-class-name="my-label">
          <template #label>
            <div class="cell-item">
              <img src="../../assets/icon_dollor.png" alt="" style="height: 30px;">
              今日交易额
            </div>
          </template>
          268500
        </el-descriptions-item>
        <el-descriptions-item align="center" label-class-name="my-label">
          <template #label>
            <div class="cell-item">
              <img src="../../assets/icon_dollor.png" alt="" style="height: 30px;">
              本月交易额
            </div>
          </template>
          268500
        </el-descriptions-item>
        <el-descriptions-item align="center" label-class-name="my-label">
          <template #label>
            <div class="cell-item">
              <img src="../../assets/white_order.png" alt="" style="height: 30px;">
              今日订单数
            </div>
          </template>
          268500
        </el-descriptions-item>
        <el-descriptions-item align="center" label-class-name="my-label">
          <template #label>
            <div class="cell-item">
              <img src="../../assets/white_order.png" alt="" style="height: 30px;">
              本月订单数
            </div>
          </template>
          268500
        </el-descriptions-item>
        <el-descriptions-item align="center" label-class-name="my-label">
          <template #label>
            <div class="cell-item">
              <img src="../../assets/black_order.png" alt="" style="height: 30px;">
              待发货订单数
            </div>
          </template>
          268500
        </el-descriptions-item>
        <el-descriptions-item align="center" label-class-name="my-label">
          <template #label>
            <div class="cell-item">
              <img src="../../assets/icon_mos.png" alt="" style="height: 30px;">
              反馈问题订单数
            </div>
          </template>
          268500
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="search">
      <el-input v-model="params.cargoName" style="width: 180px;margin-right: 10px" placeholder="请输入商品名称" clearable />
      <el-select v-model="params.state" placeholder="请选择状态" style="width: 180px;margin-right: 10px" clearable>
        <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="params.business" placeholder="请选择商家" style="width: 180px;margin-right: 10px" clearable>
        <el-option v-for="item in businessOptions" :key="item.id" :label="item.businessName" :value="item.id" />
      </el-select>
      <el-button type="primary">查询</el-button>
      <el-button @click="gotoAdd">添加</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%" :height="height">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="cargoName" label="商品名称" width="180" />
        <el-table-column prop="sort" label="排序" width="60" />
        <el-table-column prop="seller" label="商家" width="180" />
        <el-table-column prop="specifications" label="规格" width="90" />
        <el-table-column prop="variety" label="品种" width="180" />
        <el-table-column prop="wight" label="单位重量(克)" width="110" />
        <el-table-column prop="price" label="单价(金额)" width="110" />
        <el-table-column prop="originPrice" label="原价(金额)" width="110" />
        <el-table-column prop="inventoryQuantity" label="总库存数" width="90" />
        <el-table-column prop="saled" label="已售出数" width="90" />
        <el-table-column prop="quantity" label="库存数" width="90" />
        <el-table-column prop="saledMoney" label="销售额(金额)" width="120" />
        <el-table-column prop="state" label="状态" width="90">
          <template #default="scope">
            {{ stateOptions.find(so => so.value === scope.row.state).label }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="180">
          <template #default="scope">
            <el-button link type="primary" @click="gotoPreview">
              预览
            </el-button>
            <el-button v-if="scope.row.state === '0'" link type="primary" @click="gotoEdit(scope.row)">修改</el-button>
            <el-button v-if="scope.row.state === '1'" link type="primary">下架</el-button>
            <el-button v-if="scope.row.state === '0' || scope.row.state === '2'" link type="primary">申请上架</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <CargoAdd :visiable="cargoAddVisiable" @close="cargoAddVisiable = false" />
  <CargoEdit :visiable="cargoEditVisiable" :choose="chooseCargo.value" @close="cargoEditVisiable = false" />
  <CargoPreview :visiable="cargoPreviewVisiable" @close="cargoPreviewVisiable = false" />
</template>

<style scoped>
.cl-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  overflow: auto;
}

.static {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.el-col {
  text-align: center;
}

.search {
  padding: 10px;
}

.table {
  margin: 0 10px;
}

.cell-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.my-label) {
  background-color: #fff !important;
}
</style>